<!-- 显示图标 -->
<template>
  <com-dialog class="show-icon-wp"
    v-model="visible"
    :show-header="false"
    width="807px">
    <el-tabs v-model="tabs.active">
      <el-tab-pane v-for="(item, index) in tabs.list" :label="item.title" :name="item.name" :key="index">
        <icon-list :value.sync="iconClass" :list="item.list"></icon-list>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer">
      <el-button class="btn" size="medium" @click="visible = false">取消</el-button>
      <el-button class="btn" :loading="btnLoading" type="primary" size="medium" @click="submit()">确认</el-button>
    </div>
  </com-dialog>
</template>
<script>

import iconList from "./icon-list.vue";
import elementIcon from "@/utils/icon/element-icon.js";

export default {
  components: {
    iconList
  },
  data () {
    return {
      visible: false,
      loading: null,
      btnLoading: false,
    
      tabs: {
        active: 'element',
        list: [
          {title: 'ELEMENT图标', name: 'element', list: elementIcon},
          {title: 'aaa图标', name: 'aaa', list: elementIcon},
          {title: 'bbb图标', name: 'bbb', list: elementIcon}
        ]
      },

      iconClass: '', // 当前选中的icon的class名

    }
  },

  methods: {
    open (className) {
      this.iconClass = className;
      this.setDefaultTab();

      this.visible = true;
    },

    // 提交
    submit () {
      this.$emit('change', this.iconClass);
      this.visible = false;
    },

    // 设置默认选中
    setDefaultTab () {
      if (!this.iconClass) {
        this.tabs.active = this.tabs.list[0].name;
        return;
      }
      var currentTab = null; // 当前选中的tab
      for (var i = 0; i < this.tabs.list.length; i++) {
        var aItem = this.tabs.list[i];
        for (var j = 0; j < aItem.list.length; j++) {
          var bItem = aItem[j];
          // 判断当前的class与选中的class是否相同
          if (bItem == this.iconClass) {
            currentTab = aItem;
            break;
          }
        }
        if (currentTab) {
          break;
        }
      }
      this.tabs.active = currentTab ? currentTab.name : this.tabs.list[0].name;
    }

  }
}
</script>
<style lang="scss" scoped>
.show-icon-wp {
  .this-form {
    padding-right: 20px;
  }
}
</style>